//	新建表单
import { Form, Input, InputNumber, Modal, Button, message, Select, Radio } from 'antd';
import React, { useState, useEffect } from 'react';
import { addModelInput } from 'src/services/DataManage/type';

interface AddNewModalComponentProps {
    modalVisible: boolean,
    onCreate: ( value: addModelInput ) => void;
    closeModal: ( value: boolean ) => void;
    editId: string;
		treeData: any;
		cronData: any;
}

export const CreateModalComponent = React.forwardRef( ( props: AddNewModalComponentProps, formRef: any ) => {
	const layout = {
		labelCol: { span: 6 },
		wrapperCol: { span: 18 },
	};

	const weekOptions = [
		{ label: '星期一', value: 1 },
		{ label: '星期二', value: 2 },
		{ label: '星期三', value: 3 },
		{ label: '星期四', value: 4 },
		{ label: '星期五', value: 5 },
		{ label: '星期六', value: 6 },
		{ label: '星期日', value: 7 }
	];

	const [ loading, setLoading ] = useState( false );
	const [ jobType, setJobType ] = useState( null );
	const [ form ] = Form.useForm();

	useEffect( () => {
		setJobType( ( !props.cronData || props.cronData.jobType === void( 0 ) ) ? null : props.cronData.jobType );
	}, [ props.cronData, props.editId ] );

	const jobTypeChange = ( e ) => {
		setJobType( parseInt( e.target.value ) );
		// console.log( e.target.value, taskConfig );
	};

	const fieldConfig = [
		{
			name: 'name',
			label: '数据整理名称',
			rules: [ { required: true, message: '请输入名称' } ],
			component: <Input/>
		},
		{
			name: 'comments',
			label: '描述',
			rules: [ { required: false, message: '请输入名称' } ],
			component: <Input/>
		},
		{
			name: 'parentCode',
			label: '选择文件夹',
			rules: [ { required: true, message: '请输入内容' } ],
			component: <Select>
				{
					props.treeData.map(
						item => {
							return (
								<Select.Option key={item.key} value={item.key}>{item.title}</Select.Option>
							);
						}
					)
				}
			</Select>
		},
		/* {
			name: 'cronExpression',
			label: '表达式',
			rules: [ { required: false, message: '请输入表达式' } ],
			component: <Input/>
		}, */
		{
			name: 'jobType',
			label: '定时配置',
			component: <Radio.Group onChange={ jobTypeChange }>
				{/* <Radio.Button value={0}>每分钟</Radio.Button> */}
				<Radio.Button value={4}>每小时</Radio.Button>
				<Radio.Button value={1}>每天</Radio.Button>
				<Radio.Button value={3}>每周</Radio.Button>
				<Radio.Button value={2}>每月</Radio.Button>
			</Radio.Group>
		},
	];

	const taskConfig = [
		{
			name: 'dayOfMonths',
			label: '日期',
			hide: jobType !== 2,
			initialValue: 1,
			rules: [ { required: true, message: '请输入日期' } ],
			component: <InputNumber min={1} max={31} />
		},
		{
			name: 'dayOfWeeks',
			label: '星期几',
			hide: jobType !== 3,
			initialValue: [ 1 ],
			rules: [ { required: true, message: '请选择星期几' } ],
			component: <Select mode="multiple" allowClear>
				{
					weekOptions.map( item => {
						return (
							<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
						);
					} )
				}
			</Select>
		},
		{
			name: 'hour',
			label: '小时点',
			hide: [ 0, 4, null ].includes( jobType ),
			initialValue: 1,
			rules: [ { required: true, message: '请输入小时点' } ],
			component: <InputNumber min={0} max={23} />
		},
		{
			name: 'minute',
			label: '分钟点',
			hide: jobType < 1,
			initialValue: 0,
			rules: [ { required: true, message: '请输入分钟点' } ],
			component: <InputNumber min={0} max={59} />
		},
		/* {
			name: 'second',
			label: '秒数',
			hide: jobType === null,
			initialValue: 0,
			rules: [ { required: true, message: '请输入秒数' } ],
			component: <InputNumber min={0} max={59} />
		}, */
	];

	const handleOk = () => {
		setLoading( true );
		form.validateFields().then( ( value: any ) => {
			console.log( value );
			const { name, comments,parentCode,cronExpression,jobType,dayOfMonths,dayOfWeeks,hour,minute } = value;	//编辑时只传这两个
			const cronData = { jobType,dayOfMonths: dayOfMonths ? [ dayOfMonths ] : null,dayOfWeeks,hour,minute, second: 0, };
			props.onCreate( props.editId ? { name, comments,cronExpression,fileCode: parentCode, cronData: cronData.jobType ? JSON.stringify( cronData ) : null } : value );
		} ).catch( info => {
			message.warning( '请完善信息' );
		} ).finally( () => {
			setLoading( false );
		} );
	};

	const handleCancel = () => {
		props.closeModal( false );
	};

	return (
		<Modal
			destroyOnClose
			title="更新模板"
			visible={ props.modalVisible }
			onCancel={ handleCancel }
			footer={ [
				<Button key="submit" type="primary" loading={ loading } onClick={ handleOk }>
                    确定
				</Button>,
				<Button key="cancel" onClick={ handleCancel }>
                    取消
				</Button>,
			] }
		>
			<Form
				preserve={ false }
				ref={ formRef }
				{ ...layout }
				form={ form }
				name="basic"
				initialValues={ { remember: true } }
			>
				{
					fieldConfig.map( ( v, i ) => {
						return (
							<Form.Item label={ v.label } name={ v.name } rules={ v.rules } key={ i }>
								{ v.component }
							</Form.Item>
						);
					} )
				}

				{
					jobType !== null && taskConfig.map( ( v, i ) => {
						return v.hide ? null : (
							<Form.Item label={ v.label } name={ v.name } initialValue={ v.initialValue } rules={ v.rules } key={ `job${i}` }>
								{ v.component }
							</Form.Item>
						);
					} )
				}

			</Form>
		</Modal>
	);
} );
